import React, { Component } from 'react'

export default class App extends Component {
  //方法二，在构造函数中绑定this
  constructor() {
    //调用父类的方法
    super()
    this.handle1 = this.handle1.bind(this)
  }
  //类成员属性
  num = 100
  handle() {
    //事件触发绑定事件处理方法，this指向何处
    //事件的触发导致this执行丢失了，默认执行window对象，在js严格模式下指向了undefined
    console.log(this);
    console.log(this.num);
  }
  handle1() {
    console.log(this);
    console.log(this.num);
  }
  //方法三  将事件处理方法通过剪头函数定义
  handle2 = () => {
    console.log(this);
    console.log(this.num);
  }
  handle3() {
    console.log(this);
    console.log(this.num);
  }
  render() {
    return (
      <div>
        {/**事件绑定处理方法不能够加()，加()代表立即调用，但是此处是通过事件触发 */}
        {/**方法一 通过bind传递绑定this */}
        {/**bind传参不立即执行 */}
        {/**call apply绑定传参立即执行 参数 单个参数和数组参数 */}
        <button onClick={this.handle.bind(this)}>获取num</button>
        <div>
          <button onClick={this.handle1}>获取num1</button>
        </div>
        <div>
          <button onClick={this.handle2}>获取num2</button>
        </div>
        {/**方法四 事件触发箭头函数  箭头函数再调用事件处理方法 */}
        {/**事件触发箭头函数后 ，要立即调用事件处理方法*/}
        <div>
          <button onClick={() => this.handle3()}>获取num3</button>
        </div>
      </div>
    )
  }
}
